<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Atlas</title>
    <link rel="stylesheet" href="niivue.css" />
  </head>
  <body>
    <noscript>niivue requires JavaScript.</noscript>
    <header>
      <label for="alphaSlider">Opacity</label>
      <input
        type="range"
        min="1"
        max="255"
        value="8"
        class="slider"
        id="alphaSlider"
      />
      <label for="atlasOutlineSelect">Atlas Outline</label>
      <select id="atlasOutlineSelect">
        <option value="0">None</option>
        <option value="0.01" selected>Gap</option>
        <option value="1">Opaque</option>
        <option value="-1">Black</option>
      </select>
      &nbsp; &nbsp;
      <label for="renderMode">Render Mode</label>
      <select id="renderMode">
        <option value="-1">slices</option>
        <option value="0">matte</option>
        <option value="0.3">low</option>
        <option value="0.6">medium</option>
        <option value="1.0" selected>high</option>
      </select>
      <button id="aboutBtn">About</button>
    </header>
    <main>
      <canvas id="gl1"></canvas>
    </main>
    <footer id="location">&nbsp;</footer>
    <script type="module" async>
      import * as niivue from "../dist/index.js"
      var volumeList1 = [
        {url: "../images/inia19-t1-brain.nii.gz"},
        {url: "../images/inia19-NeuroMaps.nii.gz", opacity: 0.5},
      ]
      let activeIdx = - 1
      function handleLocationChange(data) {
        document.getElementById("location").innerHTML = data.string
        let idx = data.values[1].value
        if ((isFinite(idx)) && (idx !== activeIdx)) {
          activeIdx = idx
          nv1.opts.atlasActiveIndex = activeIdx
          nv1.updateGLVolume()
        }
      }
      alphaSlider.oninput = function () {
        nv1.setOpacity(1, this.value / 255)
      }
      atlasOutlineSelect.onchange = function () {
        nv1.setAtlasOutline(parseFloat(this.value))
      }
      renderMode.onchange = function () {
        nv1.setVolumeRenderIllumination(parseFloat(this.value))
      }
      aboutBtn.onclick = function () {
        window.alert(
          "This demo demonstrates sparse labeling. The inia19 atlas has 1004 labels in the range 0..1606."
        )
      }
      var nv1 = new niivue.Niivue({show3Dcrosshair: true, onLocationChange: handleLocationChange })
      nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS
      nv1.opts.dragMode = nv1.dragModes.pan
      nv1.opts.yoke3Dto2DZoom = true
      await nv1.attachTo("gl1")
      renderMode.onchange()
      await nv1.loadVolumes(volumeList1)
      await nv1.volumes[1].setColormapLabelFromUrl("../images/inia19-NeuroMaps.json")
      alphaSlider.oninput()
      atlasOutlineSelect.onchange()
      nv1.updateGLVolume()
    </script>
  </body>
</html>
